<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script> 
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
<style type="text/css">
a{margin-right:30px;}
</style>
</head>
<body> 
<!-- 参考： https://blog.csdn.net/zcl_love_wx/article/details/52034193-->
<!-- 参考： https://blog.csdn.net/yangjvn/article/details/47703973 -->
<div ng-app="myApp" ng-controller="myAppController">
    <a ui-sref="home">首页</a>
    <a ui-sref="hot">热门</a>
    <a ui-sref="top">TOP</a>
    <div ui-view></div>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(["$stateProvider",function($stateProvider){      
    $stateProvider
    .state("home",{
        url: '/home', 
        template:"page/home.html"
    })
    .state("hot",{
        url:'/hot',
        templateUrl :'page/hot.html',
        controller:"hotController"
    })
    .state("top",{
        url:'/top',
        templateUrl:'page/top.html',
        controller:"topController"
    });
}]);
myApp.controller("myAppController",['$scope',function($scope){
    $scope.username = "张三";
}]);
myApp.controller("hotController",['$scope',function($scope){

}]);
</script>
</html>